<template>
  <view style="position: relative; width: 750rpx; height: 510rpx" @click="onCover">
    <image
      :src="info?.image"
      mode="aspectFill"
      style="
        width: 750rpx;
        height: 510rpx;
        background: #eee;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
      " />
  </view>

  <view class="card" style="padding-right: 90rpx; margin-top: -42rpx">
    <view style="font-weight: 500; font-size: 32rpx; color: #222222; line-height: 45rpx">
      {{ info?.propertyName }}
    </view>
    <view
      style="
        padding: 0 9rpx;
        margin-top: 12rpx;
        line-height: 30rpx;
        background: #fff0c3;
        border-radius: 4rpx;
        font-size: 22rpx;
        color: #907c3a;
        width: fit-content;
      ">
      {{ info?.propertyTypeStr }}
    </view>
    <view
      style="
        font-size: 28rpx;
        color: #f33c3c;
        margin-top: 18rpx;
        line-height: 40rpx;
        display: flex;
        justify-content: space-between;
      ">
      <view>参考价：{{ info?.showTotalPrice }}</view>
      <view style="width: 1rpx; height: 40rpx; background: #adadad"></view>
      <view>面积：{{ info?.showTotalArea }}</view>
    </view>

    <view style="display: flex; margin-top: 32rpx; line-height: 33rpx">
      <image
        src="https://static.tospurfang.com/asset/loc_black.png"
        mode="scaleToFill"
        style="width: 19rpx; height: 23rpx; margin-top: 9rpx" />
      <view style="font-size: 24rpx; color: #222; margin-left: 10rpx">{{ info?.areaName }}</view>
    </view>
  </view>

  <view class="card" style="padding-right: 0">
    <view class="title">资产图册</view>
    <view style="overflow-x: auto; display: flex; margin-top: 17rpx">
      <image
        v-for="(itm, idx) in info?.pictures"
        :key="idx"
        @click="onPreview(idx)"
        :src="itm.attachAddress"
        mode="aspectFill"
        style="
          width: 200rpx;
          height: 162rpx;
          background: #d8d8d8;
          border-radius: 8rpx;
          margin-right: 10rpx;
          flex-shrink: 0;
        " />
    </view>
  </view>

  <view class="card" v-if="info">
    <view class="title">资产基本信息</view>
    <view style="display: flex; margin-top: 17rpx; flex-wrap: wrap">
      <view v-for="(itm, idx) in options" :key="idx">
        <view
          v-if="canShow(itm.key)"
          style="min-width: 285rpx; display: flex; font-size: 28rpx; margin-right: 40rpx; line-height: 82rpx">
          <view style="color: #ababab; flex-shrink: 0">{{ itm.title }}：</view>
          <view style="color: #222222; line-height: 42rpx; margin-top: 22rpx">{{ info[itm.key] }}</view>
        </view>
      </view>
    </view>
  </view>

  <view style="height: 249rpx"></view>
</template>
<script setup>
  import { reactive } from 'vue'

  const props = defineProps({ info: Object })

  function onCover() {
    uni.previewImage({ urls: [props.info.image] })
  }

  function onPreview(idx) {
    uni.previewImage({ urls: props.info.pictures.map((itm) => itm.attachAddress), current: idx })
  }

  function canShow(key) {
    if (key == 'unitPriceExplanation') return true
    if (key == 'totalPriceExplanation') return true

    if (props.info[key] === null || props.info[key] === '') return false

    if (key == 'coverArea') return props.info.propertyType == 'industrialPark'
    if (key == 'plotRatio') return props.info.propertyType == 'industrialPark'
    if (key == 'salesUnitStr') return props.info.propertyType != 'industrialPark'
    if (key == 'roomCount') return props.info.propertyType == 'hotel'
    if (key == 'brandOperator') return props.info.propertyType == 'hotel'
    if (key == 'isGasStr')
      return props.info.propertyType == 'LOFT apartment' || props.info.propertyType == 'flatApartment'
    if (key == 'decorationDegreeStr')
      return props.info.propertyType == 'LOFT apartment' || props.info.propertyType == 'flatApartment'

    if (key == 'isCateringStr')
      return (
        props.info.propertyType == 'commercialComplex' || props.info.propertyType == 'blockTypeCommercial'
      )
    if (key == 'statusStr') return props.info.propertyType != 'hotel'
    if (key == 'rent') return props.info.propertyType != 'hotel'
    if (key == 'parkingCount') return props.info.propertyType == 'hotel'
    if (key == 'airConditioningTypeStr')
      return (
        props.info.propertyType == '5ALevelOffice' ||
        props.info.propertyType == 'AGradeOffice' ||
        props.info.propertyType == 'BGradeOffice' ||
        props.info.propertyType == 'CGradeOffice' ||
        props.info.propertyType == 'single_office'
      )
    if (key == 'isNearStreetStr')
      return (
        props.info.propertyType != 'flatApartment' &&
        props.info.propertyType != 'LOFT apartment' &&
        props.info.propertyType != 'hotel' &&
        props.info.propertyType != 'industrialPark'
      )
    if (key == 'isRegisterStr')
      return (
        props.info.propertyType != 'flatApartment' &&
        props.info.propertyType != 'LOFT apartment' &&
        props.info.propertyType != 'hotel'
      )

    return true
  }

  const options = reactive([
    { key: 'propertyTypeStr', title: '物业类型' },
    { key: 'coverArea', title: '占地面积(万㎡)' },
    { key: 'plotRatio', title: '容积率' },
    { key: 'totalArea', title: '面积(万㎡)' },
    { key: 'unitPrice', title: '单价(万元/㎡)' },
    { key: 'unitPriceExplanation', title: '价格说明' },
    { key: 'totalPrice', title: '项目总价(万元)' },
    { key: 'totalPriceExplanation', title: '价格说明' },
    { key: 'salesUnitStr', title: '销售单位' },
    { key: 'roomCount', title: '房间数量(个)' },
    { key: 'brandOperator', title: '品牌运营方' },
    { key: 'isGasStr', title: '有无燃气' },
    { key: 'decorationDegreeStr', title: '装修程度' },
    { key: 'highlights', title: '资产亮点' },
    { key: 'isCateringStr', title: '是否可做餐饮' },
    { key: 'statusStr', title: '状态' },
    { key: 'rent', title: '租金（元/m²/天）' },
    { key: 'parkingCount', title: '车位数量(个)' },
    { key: 'floor', title: '楼层' },
    { key: 'high', title: '层高（m）' },
    { key: 'propertyFee', title: '物业费（元/m²/天）' },
    { key: 'airConditioningTypeStr', title: '空调类型' },
    { key: 'isNearStreetStr', title: '是否临街' },
    { key: 'isRegisterStr', title: '是否可注册' },
    { key: 'ownershipStart', title: '产权起始时间' },
    { key: 'ownershipEnd', title: '产权终止时间' },
    { key: 'transactionWayStr', title: '交易方式' },
    { key: 'description', title: '资产描述' }
  ])
</script>
<style lang="scss">
  .card {
    margin: 30rpx 24rpx 0 24rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 28rpx;

    .title {
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      line-height: 45rpx;
    }
  }
</style>
